<template>
  <div class="mod-config editViewContainer">
    <split-pane class="splitPane" :min-percent='10' :default-percent='20' split="vertical">
      <template slot="paneL">
        <div class="treeViewContainer">
          <tree-view ref="treeView" :treeData="sysDictTree" :checkChangedHandler="getDataList"></tree-view>
        </div>
      </template>
      <template slot="paneR">
        <table-view ref="view"
                    :searchAttrs="searchAttrs"
                    :primaryKey="primaryKey"
                    :listApiName="listApiName"
                    :deleteApiName="deleteApiName"
                    :saveAuthName="saveAuthName"
                    :deleteAuthName="deleteAuthName"
                    :showAttrs="showAttrs"
        >
        </table-view>
      </template>
    </split-pane>
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
  </div>
</template>

<script>
import AddOrUpdate from './sysdict-add-or-update'
import tableView from '@/components/tableView'
import basicMixins from '@/utils/commonViewMixins'
import {mRequest} from '@/utils/request'
import treeView from '@/components/treeView'

export default {

  mixins: [basicMixins],
  data() {
    return {
      searchAttrs: {
        name: {
          label: '名字',
          placeholder: '名字'
        },
        type: {
          label: '类别',
          placeholder: '请输入类别'
        },
        distType: {
          type: 'func',
          dataFunc: () => {
            return this.$refs.treeView.$refs.treeForm.getCheckedKeys()[0]
          }
        }
      },
      primaryKey: 'id',
      listApiName: 'systemApi/listDict',
      deleteApiName: 'systemApi/deleteDict',
      saveAuthName: 'sys:dict:save',
      deleteAuthName: 'sys:dict:delete',
      showAttrs: {
        name: {label: '字典名称'},
        type: {label: '字典类型'},
        code: {label: '字典码'},
        value: {label: '字典值'},
        imagePath: {
          label: '图片',
          type: 'image'
        },
        orderNum: {label: '排序'},
        remark: {label: '备注'}
      },
      sysDictTree: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  },
  mounted() {
    this.getSysDictTreeList()
  },
  methods: {
    //获取考点
    getSysDictTreeList() {
      mRequest('systemApi/getSysDictTreeList', {}, ({data}) => {
        if (data && data.code === 0) {
          const sysDictTreeList = [{
            id: '',
            name: '字典信息',
            nodeType: 0,
            children: []
          }]

          sysDictTreeList[0].children = data.list
          this.sysDictTree = sysDictTreeList
        }
      })
    }
  },
  components: {
    AddOrUpdate,
    tableView,
    treeView
  }
}
</script>

<style scoped>
.el-card /deep/ .el-card__body {
  padding: 6px;
}

.el-card /deep/ .el-card__header {
  padding: 3px 20px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 16px;
}
</style>
